<template>
    <!-- 这个页面需要重新整理 -->
    <div class="column column--full article__footer">
        <header class="header">
            <h3 class="title">
                <span class="label">About the Author</span>
            </h3>
        </header>
        <div class="author__bios">
            <div class="bio bio--author">
                <a class="bio__figure">
                    <img class="bio__img" :src="props.authorData.avatar" v-if="props.authorData.avatar !== null">
                    <img src="../../../assets/noauthor.png" v-else>
                </a>
                <div class="bio__content">
                    <div class="bio__info">
                        <div class="bio__name">
                            <a>{{ props.authorData.name }}</a>
                        </div>
                        <div class="bio__social">
                            <a class="social email"><i class="icon icon--mail"></i></a>
                        </div>
                    </div>
                    <div class="bio__description">
                        <p>{{ props.authorData.introduce }}</p>
                    </div>
                </div>

            </div>
        </div>
        <div class="unit-container container-fluid" style="display:none">
            <div class="heading-container row">
                <h1 class="unit-heading w-100" style="text-align: center;">
                    May's Top Offers
                </h1>
            </div>
            <div class="rates-container">
                <div class="rates-container-single">
                    <div class="rate-row rate-row--with-rate rate-row--2-offer rate-item undefined">
                        <div class="tag" style="color: rgb(255, 255, 255); background: rgb(9, 111, 250);">
                            <span id="tag-tooltip-info-icon-1715672187171" class="tag-icon"></span>11x the
                            National Avg
                        </div>
                        <div class="align-items-center align-content-md-center cau-ratings">
                            <div class="cau-ratings__lrpn">
                                <div class="d-flex flex-column align-items-center">
                                    <div class="w-100 cau-ratings__lrpn__logo">
                                        <div class="text-center cau-ratings__lrpn__logo__wrapper">
                                            <img src="https://cdn.rates.consumertrack.com/rate311871_logofilepath.png"
                                                class="img-fluid">
                                            <div class="rate-row__fdic">Terms Apply</div>
                                        </div>
                                    </div>
                                    <div class="w-100 d-flex align-items-center">
                                        <div class="flex-shrink-1 cau-ratings__lrpn__rating" style="display:flex">
                                            <div class="d-flex align-items-center" style="font-size:22px;">
                                                <div class="font-weight-bold">4.6</div>
                                            </div>
                                            <div class="d-flex flex-column cau-ratings__lrpn__rating__wrapper__details">
                                                <div class="d-flex rating-stars" style="column-gap: 5px;">
                                                    <div class="position-relative star full-star"
                                                        style="height: 12px; width: 12px;">
                                                        <div class="position-absolute star">
                                                            <img src="../../../assets/star.png">
                                                        </div>
                                                    </div>
                                                    <div class="position-relative star full-star"
                                                        style="height: 12px; width: 12px;">
                                                        <div class="position-absolute star">
                                                            <img src="../../../assets/star.png">
                                                        </div>
                                                    </div>
                                                    <div class="position-relative star full-star"
                                                        style=" height: 12px; width: 12px;">
                                                        <div class="position-absolute star">
                                                            <img src="../../../assets/star.png">
                                                        </div>
                                                    </div>
                                                    <div class="position-relative star full-star"
                                                        style="height: 12px; width: 12px;">
                                                        <div class="position-absolute star">
                                                            <img src="../../../assets/star.png">
                                                        </div>
                                                    </div>
                                                    <div class="position-relative star partial-star"
                                                        style="height: 12px; width: 12px;">
                                                        <div class="position-absolute star">
                                                            <img src="../../../assets/star.png">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div
                                                    class="d-flex cau-ratings__lrpn__rating__wrapper__details__gbr-review">
                                                    <img src="https://products.gobankingrates.com/versions/4.76.0/static-fonts/gbr-logo.svg"
                                                        alt="Go Banking Rates" class="rev">Review
                                                    <span></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="cau-ratings__pn">
                                <div class="rate-row__product-name text-lg-left text-center text-uppercase">Cash Reserve
                                </div>
                            </div>
                            <div
                                class="text-sm-center d-sm-flex flex-sm-column  align-items-sm-center  cau-ratings__rate">
                                <div class="d-flex align-items-center mr-md-auto ml-md-0">
                                    <div class="cau-ratings__rate__rate-value font-weight-bold">5.50</div>
                                    <div class="text-left cau-ratings__rate__details">
                                        <span class="w-100 font-weight-bold cau-ratings__rate__details__symbol">%</span>
                                        <div class="w-100 font-weight-bold cau-ratings__rate__details__type">APY&nbsp;
                                        </div>
                                    </div>
                                </div>
                                <div class="rate-row__qualifier">
                                    <span class="rate-row__min-qualifier">New Customer Offer</span>
                                </div>
                            </div>
                            <div class="cau-ratings__fm_rate cau-ratings__fm">
                                <div class="rate-row__featured-text">
                                    <ul>
                                        <li>Earn 11x the national average**</li>
                                        <li>Unlimited transfers</li>
                                        <li>No minimum balance</li>
                                    </ul>
                                </div>
                            </div>
                            <div class="cau-ratings__cta">
                                <div class="rate-row__product-name text-center text-uppercase cau-ratings__cta__rpn">
                                    Cash Reserve</div>
                                <div id="impression-pixel" style="display: none;">
                                    <img src="https://ad.doubleclick.net/ddm/trackimp/N810774.520089GOBANKINGRATES.CO/B20995705.263982582;dc_trk_aid=459031905;dc_trk_cid=126476396;ord=[timestamp];dc_lat=;dc_rdid=;tag_for_child_directed_treatment=;tfua=;ltd=?"
                                        border="0" height="1" width="1" alt="Advertisement">
                                    <img src="https://ad.doubleclick.net/ddm/trackimp/N810774.520089GOBANKINGRATES.CO/B20995705.263982582;dc_trk_aid=459031905;dc_trk_cid=126476396;ord=[timestamp];dc_lat=;dc_rdid=;tag_for_child_directed_treatment=;tfua=;ltd=?"
                                        border="0" height="1" width="1" alt="Advertisement">
                                </div>
                                <div class="rate-row__cta">
                                    <button type="button"
                                        class="btn rounded-pill cta-has-animation btn-block font-weight-bold text-uppercase cau-ratings__cta__btn css-173blc"><span
                                            class="rate-row__cta__text">Claim Offer</span>
                                    </button>
                                </div>
                            </div>
                            <div class="font-weight-bold text-md-center cau-ratings__po">
                                <div id="impression-pixel" style="display: none;"></div>
                                <div class="rate-row__cta">
                                    <button type="button"
                                        class="btn font-weight-bold cau-ratings__po__cta css-173blc"><span
                                            class="rate-row__cta__text"><span
                                                class="cau-ratings__po__cta__title">Promoted offer: </span><span
                                                class="cau-ratings__po__cta__copy">Earn 11x the national average
                                                interest w/ no fee!</span></span></button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="rate-row rate-row--with-rate rate-row--2-offer rate-row--clickable rate-item undefined"
                        data-parent-offer-id="1755" data-child-offer-id="1745">
                        <div class="tag" style="color: rgb(255, 255, 255); background: rgb(9, 111, 250);"><span
                                id="tag-tooltip-info-icon-1715677510249" class="tag-icon"></span></div>
                        <div class="align-items-center align-content-md-center cau-ratings">
                            <div class="cau-ratings__lrpn">
                                <div class="d-flex flex-column align-items-center">
                                    <div class="w-100 cau-ratings__lrpn__logo">
                                        <div class="text-center cau-ratings__lrpn__logo__wrapper"><img
                                                src="https://cdn.rates.consumertrack.com/forbright_bank_logofilepath.png"
                                                alt="Forbright Bank"
                                                class="img-fluid rate-row__logo cau-ratings__lrpn__logo__wrapper__institution-logo">
                                            <div class="rate-row__fdic">FDIC Insured</div>
                                        </div>
                                    </div>
                                    <div
                                        class="w-100 d-flex align-items-center justify-content-between justify-content-sm-center cau-ratings__lrpn__rating__block">
                                        <div class="flex-shrink-1 cau-ratings__lrpn__rating">
                                            <div class="d-flex align-items-center cau-ratings__lrpn__rating__wrapper">
                                                <div
                                                    class="font-weight-bold cau-ratings__lrpn__rating__wrapper__rating">
                                                    4.9</div>
                                                <div
                                                    class="d-flex flex-column cau-ratings__lrpn__rating__wrapper__details">
                                                    <div class="d-flex rating-stars" style="column-gap: 5px;">
                                                        <div class="position-relative star full-star"
                                                            style="height: 12px; width: 12px;">
                                                            <div class="position-absolute star">
                                                                <img src="../../../assets/star.png">
                                                            </div>
                                                        </div>
                                                        <div class="position-relative star full-star"
                                                            style="height: 12px; width: 12px;">
                                                            <div class="position-absolute star">
                                                                <img src="../../../assets/star.png">
                                                            </div>
                                                        </div>
                                                        <div class="position-relative star full-star"
                                                            style=" height: 12px; width: 12px;">
                                                            <div class="position-absolute star">
                                                                <img src="../../../assets/star.png">
                                                            </div>
                                                        </div>
                                                        <div class="position-relative star full-star"
                                                            style="height: 12px; width: 12px;">
                                                            <div class="position-absolute star">
                                                                <img src="../../../assets/star.png">
                                                            </div>
                                                        </div>
                                                        <div class="position-relative star partial-star"
                                                            style="height: 12px; width: 12px;">
                                                            <div class="position-absolute star">
                                                                <img src="../../../assets/star.png">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div
                                                        class="d-flex align-items-center text-uppercase cau-ratings__lrpn__rating__wrapper__details__gbr-review">
                                                        <img src="https://products.gobankingrates.com/versions/4.76.0/static-fonts/gbr-logo.svg"
                                                            alt="Go Banking Rates"
                                                            class="cau-ratings__lrpn__rating__wrapper__details__gbr-review__gbr-logo">Review<span></span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="flex-grow-1  py-0 cau-ratings__lrpn__pn">
                                            <div
                                                class="rate-row__product-name text-center text-uppercase cau-ratings__lrpn__pn__element mx-auto rating-visible">
                                                Growth Savings</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="cau-ratings__pn">
                                <div class="rate-row__product-name text-lg-left text-center text-uppercase">Growth
                                    Savings</div>
                            </div>
                            <div
                                class="text-sm-center d-sm-flex flex-sm-column  align-items-sm-center justify-content-sm-center cau-ratings__rate">
                                <div class="d-flex align-items-center mr-md-auto ml-md-0">
                                    <div class="cau-ratings__rate__rate-value font-weight-bold">5.15</div>
                                    <div class="text-left cau-ratings__rate__details"><span
                                            class="w-100 font-weight-bold cau-ratings__rate__details__symbol">%</span>
                                        <div class="w-100 font-weight-bold cau-ratings__rate__details__type">APY</div>
                                    </div>
                                </div>
                                <div class="rate-row__qualifier"><span class="rate-row__min-qualifier">Terms
                                        Apply</span></div>
                            </div>
                            <div class="cau-ratings__fm_rate cau-ratings__fm">
                                <div class="rate-row__featured-text">
                                    <ul>
                                        <li>Responsible bank</li>
                                        <li>No account fees</li>
                                        <li>No minimums</li>
                                    </ul>
                                </div>
                            </div>
                            <div class="cau-ratings__cta">
                                <div class="rate-row__product-name text-center text-uppercase cau-ratings__cta__rpn">
                                    Growth Savings</div>
                                <div id="impression-pixel" style="display: none;"></div>
                                <div class="rate-row__cta"><button type="button"
                                        class="btn rounded-pill cta-has-animation btn-block font-weight-bold text-uppercase cau-ratings__cta__btn css-173blc"><span
                                            class="rate-row__cta__text">Learn More</span></button></div>
                            </div>
                            <div class="font-weight-bold text-md-center cau-ratings__po">
                                <div id="impression-pixel" style="display: none;"></div>
                                <div class="rate-row__cta"><button type="button"
                                        class="btn font-weight-bold cau-ratings__po__cta css-173blc"></button></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
const props = defineProps(['authorData'])
</script>
<style scoped lang='scss'>
@import 'aboutAuthor.css'
</style>